<template>
  <div>
    <!-- 头部 -->
    <div>
      <van-nav-bar fixed placeholder>
        <template #right>
          <van-icon
            name="search"
            size="0.48rem"
            color="#fff"
            @click="moveSearchPageFn"
          />
        </template>
        <template #left>
          <img class="logo" src="@/assets/logo.png" alt="" />
        </template>
      </van-nav-bar>
    </div>
    <!-- tab导航 -->
    <div>
      <van-tabs
        v-model="channelId"
        sticky
        offset-top="1.226667rem"
        animated
        @change="channelChangeFn"
      >
        <van-tab
          :title="obj.name"
          v-for="obj in userChannelList"
          :key="obj.id"
          :name="obj.id"
        >
          <ArticleList :channelId="channelId"></ArticleList>
        </van-tab>
      </van-tabs>
      <!-- tab+号 上的 -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        @click="plusClickFn"
        class="moreChannels"
      />
    </div>
    <van-popup class="channel_popup" v-model="show" get-container="body">
      <ChannelEdit
        :myList="userChannelList"
        :unChackList="unCheckchannelList"
        @addChannelEv="addChannelFn"
        @delChannelEv="delChannelFn"
        @closeEv="closeFn"
        ref="editRef"
        v-model="channelId"
      ></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import {
  getUserChannelsAPI,
  getAllChannelsAPI,
  updateChannelsAPI,
  removeTheChannelAPI
} from '@/api'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  data () {
    return {
      channelId: 0,
      userChannelList: [],
      allChannelList: [],
      show: false,
      channelscrollTObj: {}
    }
  },
  async created () {
    const res = await getUserChannelsAPI()
    console.log(res)
    this.userChannelList = res.data.data.channels
    const res2 = await getAllChannelsAPI()
    this.allChannelList = res2.data.data.channels
    console.log(res2)
  },
  methods: {
    channelChangeFn () {
      this.$nextTick(() => {
        document.documentElement.scrollTop =
          this.channelscrollTObj[this.channelId]
      })
    },
    plusClickFn () {
      this.show = true
    },
    async addChannelFn (obj) {
      this.userChannelList.push(obj)
      const theChannelList = this.userChannelList.filter((obj) => obj.id !== 0)
      const myChannelList = theChannelList.map((obj, index) => {
        const newObj = { ...obj }
        delete newObj.name
        newObj.seq = index
        return newObj
      })
      await updateChannelsAPI({
        channels: myChannelList
      })
    },
    async delChannelFn (myObj) {
      const index = this.userChannelList.findIndex(
        (obj) => obj.id === myObj.id
      )
      this.userChannelList.splice(index, 1)
      await removeTheChannelAPI({
        target: myObj.id
      })
    },
    closeFn () {
      this.show = false
      this.$refs.editRef.isEdit = false
    },
    moveSearchPageFn () {
      this.$router.push('/search')
    },
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop
      this.channelscrollTObj[this.channelId] = document.documentElement.scrollTop
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  computed: {
    unCheckchannelList () {
      // return this.allChannelList.filter((bigObj) => {
      //   const index = this.userChannelList.findIndex(
      //     (obj) => bigObj.id === obj.id
      //   )
      //   if (index > -1) {
      //     return false
      //   } else {
      //     return true
      //   }
      // })
      return this.allChannelList.filter(
        (bigObj) =>
          this.userChannelList.findIndex((obj) => bigObj.id === obj.id) === -1
      )
    }
  },
  activated () {
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup {
  width: 100vw;
  height: 100vh;
}
</style>
